<template>
	<view class="technology-container">
		<!-- 顶部标题栏 -->
		<view class="header" :style="{ paddingTop: safeDistance + 'px' }">
			<view class="header-content">
				<text class="header-title">技术栈</text>
				<text class="header-subtitle">探索不同技术领域的知识体系</text>
			</view>
			<view class="stats-badge">
				<text class="stats-text">{{ totalCards }}张卡片</text>
			</view>
		</view>

		<!-- 技术分类列表 -->
		<scroll-view class="tech-scroll" scroll-y enable-back-to-top>
			<view class="tech-grid">
				<view 
					v-for="tech in techList" 
					:key="tech.id" 
					class="tech-card"
					:class="{ 'tech-card-empty': tech.cardCount === 0 }"
					:style="{ background: (tech as any).bgGradient }"
					@click="handleTechClick(tech)"
				>
					<!-- 卡片背景渐变 -->
					<view class="card-gradient" :style="{ background: tech.gradient }"></view>
					
					<!-- 卡片内容 -->
					<view class="card-content">
						<!-- 顶部图标和名称 -->
						<view class="card-header">
							<text class="tech-icon">{{ tech.icon }}</text>
							<view class="tech-info">
								<text class="tech-name">{{ tech.name }}</text>
								<text class="tech-level">{{ tech.level }}</text>
							</view>
						</view>

						<!-- 描述 -->
						<text class="tech-description">{{ tech.description }}</text>

						<!-- 标签区域（固定高度，超出隐藏） -->
						<view class="tech-tags-wrapper">
							<view class="tech-tags">
								<view 
									v-for="(tag, index) in tech.tags" 
									:key="index" 
									class="tag"
								>
									<text class="tag-text">{{ tag }}</text>
								</view>
							</view>
						</view>

						<!-- 底部卡片数量（固定在底部） -->
						<view class="card-footer">
							<view class="card-count-wrapper">
								<text class="card-count-icon">📚</text>
								<text class="card-count" :class="{ 'card-count-disabled': tech.cardCount === 0 }">
									{{ tech.cardCount > 0 ? tech.cardCount + ' 张卡片' : '未开发' }}
								</text>
							</view>
							<view class="arrow-icon" v-if="tech.cardCount > 0">
								<text class="arrow">→</text>
							</view>
							<view class="status-badge" v-else>
								<text class="status-text">未开发</text>
							</view>
						</view>
					</view>

				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { getAllTechnologies } from '@/services/technology';
	import type { Technology } from '@/types/technology';

	/**
	 * 10个渐变色配置
	 */
	const gradientColors: string[] = [
		'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)',
		'linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%)',
		'linear-gradient(135deg, #4facfe 0%, #00f2fe 50%, #43e97b 100%)',
		'linear-gradient(135deg, #43e97b 0%, #38f9d7 50%, #fa709a 100%)',
		'linear-gradient(135deg, #fa709a 0%, #fee140 50%, #30cfd0 100%)',
		'linear-gradient(135deg, #30cfd0 0%, #330867 50%, #ff6e7f 100%)',
		'linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 50%, #a8edea 100%)',
		'linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #ffecd2 100%)',
		'linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #ff8a80 100%)',
		'linear-gradient(135deg, #ff8a80 0%, #ffa726 50%, #66bb6a 100%)'
	];

	/**
	 * 根据技术ID获取渐变色
	 */
	const getGradientByTechId = (techId: string): string => {
		// 使用技术ID的哈希值来选择颜色
		const hash = techId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
		const index = hash % gradientColors.length;
		return gradientColors[index];
	};

	// 技术列表
	const techList = ref<Technology[]>(getAllTechnologies().map(tech => ({
		...tech,
		bgGradient: getGradientByTechId(tech.id)
	})));

	// 计算总卡片数
	const totalCards = computed(() => {
		return techList.value.reduce((sum, tech) => sum + tech.cardCount, 0);
	});

	// 安全距离（顶部内边距 = 安全区域 + 基础间距）
	const safeDistance = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		const safeAreaTop = systemInfo.safeAreaInsets?.top || 0;
		// 基础间距 20px（约等于 40rpx），加上安全区域
		return safeAreaTop + 20;
	});

	// 点击技术卡片
	const handleTechClick = (tech: any) => {
		if (tech.cardCount === 0) {
			uni.showToast({
				title: '该技术栈内容正在制作中',
				icon: 'none',
				duration: 2000
			});
			return;
		}

		// 如果是Java或SQL，跳转到知识学习页面
		if (tech.id === 'java' || tech.id === 'sql') {
			const bgGradient = encodeURIComponent(tech.bgGradient || gradientColors[0]);
			uni.navigateTo({
				url: `/pages/technology/knowledge/index?techId=${tech.id}&bgGradient=${bgGradient}`
			});
		} else {
			uni.showToast({
				title: `正在进入${tech.name}学习`,
				icon: 'none',
				duration: 2000
			});
		}
	};
</script>

<style lang="scss" scoped>
	.technology-container {
		height: 100vh;
		background: linear-gradient(180deg, #f5f7fa 0%, #e9ecef 100%);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/**
	 * 顶部标题栏
	 */
	.header {
		flex-shrink: 0;
		width: 100%;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 32rpx;
		background: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;
		box-sizing: border-box;
	}

	.header-content {
		flex: 1;
		padding-right: 20rpx;
	}

	.header-title {
		font-size: 48rpx;
		font-weight: 900;
		color: #1a202c;
		display: block;
		margin-bottom: 8rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.header-subtitle {
		font-size: 26rpx;
		color: #64748b;
		font-weight: 500;
	}

	.stats-badge {
		padding: 12rpx 24rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 100rpx;
		box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);
	}

	.stats-text {
		font-size: 24rpx;
		font-weight: 700;
		color: white;
	}

	/**
	 * 技术列表滚动区域
	 */
	.tech-scroll {
		flex: 1;
		padding: 24rpx 24rpx 0;
		width: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		height: 0; /* 触发flex布局计算高度 */
	}

	.tech-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}
	
	/* 如果卡片数量是奇数，最后一个卡片居中 */
	.tech-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: calc(50% - 10rpx);
		margin: 0 auto;
	}

	/**
	 * 技术卡片
	 */
	.tech-card {
		border-radius: 24rpx;
		overflow: hidden;
		position: relative;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		background: white; /* 默认白色，会被内联样式覆盖 */
		display: flex;
		flex-direction: column;
		min-height: 480rpx;

		&:active {
			transform: scale(0.97);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
		}
	}

	.tech-card-empty {
		opacity: 0.85;
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%);
			pointer-events: none;
			border-radius: 24rpx;
		}
	}

	.card-gradient {
		height: 8rpx;
		width: 100%;
	}

	.card-content {
		padding: 24rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		backdrop-filter: blur(10rpx);
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
	}

	/**
	 * 卡片头部
	 */
	.card-header {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 20rpx;
		flex-shrink: 0;
	}

	.tech-icon {
		font-size: 56rpx;
		line-height: 1;
	}

	.tech-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4rpx;
	}

	.tech-name {
		font-size: 32rpx;
		font-weight: 800;
		color: #1a202c;
		line-height: 1.2;
	}

	.tech-level {
		font-size: 22rpx;
		color: #64748b;
		font-weight: 600;
	}

	/**
	 * 描述
	 */
	.tech-description {
		font-size: 24rpx;
		color: #64748b;
		line-height: 1.6;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 16rpx;
		flex-shrink: 0;
		min-height: 76rpx;
	}

	/**
	 * 标签区域包装器（固定高度）
	 */
	.tech-tags-wrapper {
		flex-shrink: 0;
		overflow: hidden;
		margin-bottom: 16rpx;
		min-height: 48rpx;
		max-height: 120rpx;
	}

	/**
	 * 标签
	 */
	.tech-tags {
		display: flex;
		gap: 8rpx;
		flex-wrap: wrap;
		align-content: flex-start;
		height: 100%;
		overflow: hidden;
	}

	.tag {
		padding: 6rpx 14rpx;
		background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
		border-radius: 8rpx;
		border: 1rpx solid #cbd5e1;
	}

	.tag-text {
		font-size: 20rpx;
		color: #475569;
		font-weight: 600;
	}

	/**
	 * 卡片底部（固定在底部）
	 */
	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 16rpx;
		border-top: 2rpx solid rgba(241, 245, 249, 0.6);
		margin-top: auto;
		flex-shrink: 0;
	}

	.card-count-wrapper {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.card-count-icon {
		font-size: 28rpx;
	}

	.card-count {
		font-size: 24rpx;
		font-weight: 700;
		color: #667eea;
	}

	.card-count-disabled {
		color: #94a3b8;
	}

	.arrow-icon {
		width: 48rpx;
		height: 48rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
	}

	.arrow {
		font-size: 28rpx;
		color: white;
		font-weight: 700;
	}

	/**
	 * 未开发状态标记
	 */
	.status-badge {
		padding: 8rpx 16rpx;
		background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
		border-radius: 100rpx;
		box-shadow: 0 2rpx 8rpx rgba(148, 163, 184, 0.2);
	}

	.status-text {
		font-size: 20rpx;
		font-weight: 700;
		color: #64748b;
	}


	/**
	 * 底部占位
	 */
	.bottom-placeholder {
		height: 120rpx;
	}
</style>

